| animate动画执行一次（animation | 您所在的位置：网站首页 › unity 动画播放一次 › animate动画执行一次（animation |
animate动画执行一次（animation
|
今天在做公司9周年H5动画的时候遇到了一点问题，之前写动画都是这么写的： animation:rotateScale 3s infinite; -moz-animation:rotateScale 3s infinite; /* Firefox */ -webkit-animation:rotateScale 3s infinite; /* Safari and Chrome */ -o-animation:rotateScale 3s infinite; /* Opera */这里忽略了infinite含义为无穷的这个参数，所以动画不停的去执行 animation:rotateScale 3s; -moz-animation:rotateScale 3s; /* Firefox */ -webkit-animation:rotateScale 3s; /* Safari and Chrome */ -o-animation:rotateScale 3s; /* Opera */ animation-iteration-count:1;/*动画只执行一次*/ -moz-animation-iteration-count:1; -webkit-animation-iteration-count:1; -o-animation-iteration-count:1;让动画只执行一次，首选 animation-iteration-count，这样写后发现动画执行完毕后跳回了原CSS定义的样式 width: 100%; margin-top: 30%; transform: scale(0.1) rotate(0deg);通过百度后找到了答案：animation-fill-mode（让动画停留在最后一帧），这样就OK啦 animation:rotateScale 3s; -moz-animation:rotateScale 3s; /* Firefox */ -webkit-animation:rotateScale 3s; /* Safari and Chrome */ -o-animation:rotateScale 3s; /* Opera */ animation-iteration-count:1;/*动画只执行一次*/ -moz-animation-iteration-count:1; -webkit-animation-iteration-count:1; -o-animation-iteration-count:1; animation-fill-mode: forwards; /*让动画停留在最后一帧 */ -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards;
|
【本文地址】
公司简介
联系我们